import { useState } from "react";
import styles from "./pickingPortraits.module.less";
import clsx from "clsx";
import { message, Spin } from "antd";
import designEditor from "@/editorComponent/designEditor";
import templateManageService from "@/api/services/templateManageService";

// 扣人像
export default function PickingPortraits() {

  const [hover, setHover] = useState(false);
  const [visible, setVisible] = useState(false);
  const [disable, setDisable] = useState(false);
  const [loadding, setLoadding] = useState(false);
  const [allowNumber, setAllowNumber] = useState(0);

  const handleClick = async () => {
    // const res = await templateManageService.getCutoutCtr();
    // const { allow, restNumber } = res;
    // setAllowNumber(restNumber);
    // if (allow) {
      setLoadding(true);
      // 对当前选中的图片进行人像抠图
      await designEditor.matting();
      setLoadding(false);
    // } else {
      // message.warning('人像抠图次数已用完！')
    // }
  };

  return (
    <div
      className={clsx(styles.pickingPortraits, loadding && styles.hover)}
      onClick={handleClick} >
      {loadding && <Spin className={styles.spin} size="small" />}扣人像
    </div >
  );
}
